<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">统计查询模块</div>
                    <div class="layui-card-body">
                            <div id="echarts"  style="width: 100%; height: 600px;"></div>                                               

                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">统计详情</div>
                    <div class="layui-card-body">
                        
                            <table class="layui-table layui-form">
                                    <colgroup>
                                      <col width="300">
                                      <col width="200">
                                      <col>
                                    </colgroup>
                                    <thead>
                                      <tr>
                                        <th>隐患</th>
                                        <th colspan="3">1季度</th>
                                        <th colspan="3">2季度</th>
                                        <th colspan="3">3季度</th>
                                        <th colspan="3">4季度</th>
                                      </tr> 
                                      <tr>
                                            <th>部门名称</th>
                                            <th>隐患</th>
                                            <th>已整改</th>
                                            <th>未整改</th>
                                            <th>隐患</th>
                                            <th>已整改</th>
                                            <th>未整改</th>
                                            <th>隐患</th>
                                            <th>已整改</th>
                                            <th>未整改</th>
                                            <th>隐患</th>
                                            <th>已整改</th>
                                            <th>未整改</th>
                                          </tr> 
                                    </thead>
                                    <tbody>
                                      <tr>
                                        <td>安保部</td>
                                        <td>1</td>
                                        <td>1</td>
                                        <td>0</td>
                                        <td>5</td>
                                        <td>4</td>
                                        <td>1</td>
                                        <td>3</td>
                                        <td>3</td>
                                        <td>0</td>
                                        <td>2</td>
                                        <td>3</td>
                                        <td>0</td>                                        
                                      </tr>
                                      <tr>
                                        <td>办公室</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>   
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>4</td>
                                        <td>3</td>
                                        <td>1</td>
                                        <td>2</td>
                                        <td>1</td>
                                        <td>1</td>                                 
                                      </tr>
                                      <tr>
                                        <td>消防科</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>   
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>5</td>
                                        <td>4</td>
                                        <td>1</td>
                                        <td>2</td>
                                        <td>1</td>
                                        <td>1</td>                                 
                                      </tr>
                                      <tr>
                                        <td>环保科</td>
                                        <td>1</td>
                                        <td>0</td>
                                        <td>1</td>   
                                        <td>2</td>
                                        <td>0</td>
                                        <td>2</td>
                                        <td>6</td>
                                        <td>6</td>
                                        <td>0</td>
                                        <td>2</td>
                                        <td>1</td>
                                        <td>1</td>                                 
                                      </tr>
                                      <tr>
                                        <td>环保科</td>
                                        <td>1</td>
                                        <td>1</td>
                                        <td>0</td>   
                                        <td>0</td>
                                        <td>0</td>
                                        <td>0</td>
                                        <td>7</td>
                                        <td>5</td>
                                        <td>2</td>
                                        <td>2</td>
                                        <td>0</td>
                                        <td>2</td>                                 
                                      </tr>
                                    </tbody>
                                  </table>      

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../../layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index','carousel', 'echarts', 'form'], function () {
            
    var echarts = layui.echarts,admin = layui.admin ,form = layui.form; 

    var myecharts = echarts.init(document.getElementById('echarts'));
    myecharts.showLoading({
        text : "正在努力的读取数据中。。。。。",
    })

   var  option = {
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
        data:['隐患','已整改','未整改']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : ['一季度','二季度','三季度','四季度']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'隐患',
            type:'bar',
            data:[2, 7, 25, 11],
            markLine : {
                lineStyle: {
                    normal: {
                        type: 'dashed'
                    }
                },
                data : [
                    [{type : 'min'}, {type : 'max'}]
                ]
            }
        },
        {
            name:'已整改',
            type:'bar',
            stack: '广告',
            data:[2, 4, 21, 6]
        },
        {
            name:'未整改',
            type:'bar',
            stack: '广告',
            data:[1, 3, 4, 5]
        }
    ]
};
        myecharts.hideLoading();    //隐藏加载动画
        myecharts.setOption(option); 

        });
    </script>
</body>

</html>